<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<!DOCTYPE html>
<html lang="en">
<head>
<title><s:message code="app.title" /></title>
<%@ include file="Include.jsp"%>
<script type="text/javascript">
	
	$(document).ready(function() {
		var oTable = $('#portTable').dataTable( {
			 	"bDestroy": true,
		        "bProcessing": false,
		        "iDisplayLength": 10,
		        "bFilter": false,
		        "bLengthChange": false,
		        "aoColumnDefs": [
		          { 'bSortable': false, 'aTargets': [1] }
		       	]
		 	} );
		
		$('#addPort').click(function(){
			$('#portListForm').attr('action','AddPort');
			$('#portListForm').attr('method','get');
			$('#portListForm').submit();
		});
		
	});
	
	function edit(portId){
		$('#portEditForm').attr('action','EditPort?portId='+portId);
		
		$('#portId').val(portId);
		
		$('#portEditForm').attr('method','get');
		$('#portEditForm').submit();
	}
	
</script>
</head>
<body>
	<div class="container">
		<%@ include file="Menu.jsp"%>
		<h2><s:message code="portForm.listheader" /></h2>
		<hr>
		<form:form id="portEditForm" >
			<input type="hidden" id="portId" name="portId" />
		</form:form>
		<form:form id="portListForm" >
		<table class="table table-hover table-bordered" id="portTable">
				<thead>
					<tr>
						<th><s:message code="portForm.portname" /></th>
						<th><s:message code="app.sector" /></th>
						<th><s:message code="app.country" /></th>
						<th><s:message code="app.state" /></th>
						<th><s:message code="app.city" /></th>
						<th><s:message code="app.action" /></th>
					</tr>
				</thead>
				
				<tbody>
					<c:forEach items="${portList}" var="port" >
						<tr>
							<td>
								<c:out value="${port.portname}"></c:out>
							</td>
							<td>
								<c:out value="${port.sectorname}"></c:out>
							</td>
							<td>
								<c:out value="${port.countryname}"></c:out>
							</td>
							<td>
								<c:out value="${port.statename}"></c:out>
							</td>
							<td>
								<c:out value="${port.cityname}"></c:out>
							</td>
							<td>
								<a href="#" onclick="javascript: edit('${port.portid}');" >Edit</a>
							</td>
						</tr>
					</c:forEach>
				</tbody>
		</table>
		<br>
		<br>
		<br>
		<button class="btn btn-primary" type="button" id="addPort"><s:message code="portForm.addheader"/></button>
		</form:form>
		<%@ include file="Footer.jsp"%>
	</div>
</body>
</html>